import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/Login/Login'
import Home from '@/views/Home/Home'
import Main from '@/views/Home/Main'
import Project from '@/views/Home/Project'
import Team from '@/views/Home/Team'
import Welcome from '@/views/Home/Main/Welcome'
import Entity from '@/views/Home/Main/Entity'
import Character from '@/views/Home/Main/Character'
import House from '@/views/Home/Main/House'
import Castle from '@/views/Home/Main/Castle'
import Global from '@/views/Home/Main/Global'
import Simple from '@/views/Home/Main/Simple'
import Complex from '@/views/Home/Main/Complex'
import Faq from '@/views/Home/Main/Faq'
import Query from '@/views/Home/Main/Query'
import Relation from '@/views/Home/Main/Relation'
import Visual from '@/views/Home/Main/Visual'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/login',
    component: Login
  },
  {
    path: '/home',
    component: Home,
    redirect: '/main',
    children: [
      {
        path: '/main',
        component: Main,
        redirect: '/welcome',
        children: [
          {
            path: '/welcome',
            component: Welcome
          },
          {
            path: '/entity',
            component: Entity
          },
          {
            path: '/relation',
            redirect: '/character',
            component: Relation,
            children: [
              {
                path: '/character',
                component: Character
              },
              {
                path: '/house',
                component: House
              },
              {
                path: '/castle',
                component: Castle
              }
            ]
          },
          {
            path: '/visual',
            redirect: '/global',
            component: Visual,
            children: [
              {
                path: '/global',
                component: Global
              },
              {
                path: '/simple',
                component: Simple
              },
              {
                path: '/complex',
                component: Complex
              }
            ]
          },
          {
            path: '/faq',
            component: Faq
          },
          {
            path: '/query',
            component: Query
          }

        ]

      },
      {
        path: '/project',
        component: Project
      },
      {
        path: '/team',
        component: Team
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router
